<template>
   <div class="searchTable" >
            <el-table :data="testArray" v-loading="loading"  style="width: 100%" :cell-style="{ color: '#fff' }"
                :header-cell-style="{ color: '#00ffff' }" height="185" size="small" >
                <template slot="empty">
                  
                    <span style="color:#9d9d9d;">{{tableEmptyText}}</span>
                </template>

                <el-table-column prop="fullName" label="企业名称" width="80">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.fullName" placement="top" >
                            <span style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                {{ scope.row.fullName }}
                            </span>

                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="cfCfmc" label="处罚名称">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.cfCfmc" placement="top">
                            <span
                                style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                {{ scope.row.cfCfmc }}
                            </span>
                    
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="cfSy" label="处罚事由">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.cfSy" placement="top">
                            <span
                                style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                {{ scope.row.cfSy }}
                            </span>
                    
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="cfJg" label="处罚结果">
                    <template slot-scope="scope">
                        <el-tooltip :content="scope.row.cfJg" placement="top">
                            <span
                                style=" display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-line-clamp: 1;-webkit-box-orient: vertical; white-space: pre-line;">
                                {{ scope.row.cfJg }}
                            </span>
                    
                        </el-tooltip>
                    </template>
                </el-table-column>
                <el-table-column prop="cfJdrq" label="处罚决定日期">
                </el-table-column>
            
            </el-table>
            <div class="bottom">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
                    :page-size="size" layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { reqAdministrativeSanction } from '@/api/home/index.js'
export default {
    data(){
        return {
               testArray: null,
            total: 0,
            page: 1,
            size: 10,
            loading:false,
            tableEmptyText:''
        }
    },
    computed:{
         ...mapGetters(['customCode']),
    },
      watch:{
      
        customCode(val) {
            // console.log(val);
            this.getList(val)

        },
    },
      created(){
       
        if (this.customCode == '' || !this.customCode) {
            this.getList('22')
        } else {
            this.getList(this.customCode)
        }   
    },
     methods:{
        async getList(code) {
            this.loading=true
            const res = await reqAdministrativeSanction({customsCode:code, page: this.page, size: this.size })
            
            this.testArray = res.data.list
            this.total = res.data.total
            this.tableEmptyText = '暂无数据'
            this.loading=false
            // console.log(res);
        },

        handleSizeChange(val) {
            this.size=val
            this.getList()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.page=val
            this.getList()
            // console.log(`当前页: ${val}`);
        }
        
      
    }
}
</script>

<style lang="scss" scoped>
.searchTable {
   
      ::v-deep .el-loading-mask {
            background-color: rgba(255, 255, 255, 0);

         
                        .el-loading-spinner .circular {
                            width: 30px;
                            height: 30px;
                        }
            .el-loading-spinner .path {
                stroke: #c23531;
                stroke-width: 8px;
            }
        }
    .bottom {
        margin-top: 5px;
        display: flex;
        justify-content: flex-end;

        ::v-deep .el-pagination {
            .btn-prev {
                background: transparent;
            }

            .btn-next {
                background: transparent;
            }

            .el-pager {
                .number {
                    color: #fff;
                }

                .active {
                    color: #1890ff;
                    cursor: default;
                }

                li {
                    background: transparent;

                }
            }
        }
    }

    ::v-deep .el-table,
    ::v-deep .el-table__expanded-cell {
        background-color: transparent !important;

    }


    /* 表格内背景颜色 */

    ::v-deep .el-table tr,
    ::v-deep .el-table td {
        background-color: transparent !important;
        border-bottom: none;
    }

    ::v-deep .el-table th {
        background-color: #013689 !important;
        border-bottom: none;

    }

    ::v-deep .el-table td {
        border-bottom: none;
    }

    ::v-deep .el-table::before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
    }
}
</style>